<template>
	<view class="vf-selest-box" ref="vf-selest-box">  
	<!--  :style="{width: width+'rpx', height: height+'rpx'}" -->
		
		<view class="sele-top" :style="{width: width+'rpx', height: height+'rpx'}">
			
			<!-- 选择列表 -->
			<view class="vf-select-item" v-for="(item, index) in select" :key="index" @click="click1(item, index)" :class="{active1: active1 === index}">
				<text class="vf-text1" :style="{color: item.titleName ? activeColor : color}">{{ item.titleName || item.name }}</text>
				<view class="sort" v-if="item.isSort">
					<vf-icons type="sortT" class="sort-text" :color="!item.def ? activeColor : color" :size="32" />
					<vf-icons type="sortB" class="sort-text1" :color="item.def ? activeColor : color" :size="32" />
				</view>
				<view class="open" v-else>
					<vf-icons type="top" class="open-text" :size="30" v-if="item.open" :color="item.titleName ? activeColor : color"></vf-icons>
					<vf-icons type="bottom" class="open-text" :size="30" v-else :color="item.titleName ? activeColor : color"></vf-icons>
				</view>
			</view>
			
			<view class="right" v-if="typeset || filter">
				
				<!-- 布局切换按钮 -->
				<view v-if="typeset" class="typeset" @click="changeTypeset">
					<vf-icons type="listL" class="open-text" v-if="typesetType" :size="32"></vf-icons>
					<vf-icons type="listB" class="open-text" v-else :size="32"></vf-icons>
				</view>
				
				<!-- 过滤器按钮 -->
				<view v-if="filter" class="filter" @click="switchFilter">
					<text class="filter-text">筛选</text>
					<vf-icons type="filter" class="filter-text1" :size="32"></vf-icons>
				</view>
				
			</view>
			
		</view>
		
		
		
		<!-- 子选择器 -->
		<view class="sele-cont" :class="{'open-box': isOpen}" :style="{top: topH + 'px', width: width+'rpx'}">
			<scroll-view class="lists lists2" v-if="lists2.length" scroll-y="true">
				<view class="list list2" v-for="(item, index) in lists2" :key="index" @click="click2(item, index)" :class="{active2: active2 === index}">
					<text class="list-text">{{item.name}}</text>
				</view>
			</scroll-view>
			<scroll-view class="lists lists3" v-if="showLists3" scroll-y="true">
				<view class="list list3" v-for="(item, index) in lists3" :key="index" @click="click3(item, index)" :class="{active3: active3 === index}">
					<text class="list-text">{{item.name}}</text>
				</view>
			</scroll-view>
			<scroll-view class="lists lists4" v-if="showLists4" scroll-y="true">
				<view class="list list4" v-for="(item, index) in lists4" :key="index" @click="click4(item, index)" :class="{active4: active4 === index}">
					<text class="list-text">{{item.name}}</text>
				</view>
			</scroll-view>
		</view>
		
		<!-- 遮罩 -->
		<view class="mask" v-if="isOpen" @click="close" :style="{height: MaskH+'px'}"></view>
		
	</view>
</template>

<script>
  import { mainColor } from '@/config/index.js'
	export default {
		props:{
			selects: {  // 选择框对象
				type: Array,
				default() {
					return [];
				}
			},
			width: {   // 选择框高度
				type: Number,
				default: 750
			},
			height: {  // 选择框高度
				type: Number,
				default: 88
			},
			color: {  // 字体默认颜色
				type: String,
				default: '#333'
			},
			activeColor: {   // 选中的字体颜色
				type: String,
				default: mainColor
			},
			typeset: {   // 是否显示布局切换按钮
				type: Boolean,
				default: false
			},
			filter: {   // 是否显示筛选按钮
				type: Boolean,
				default: false
			},
			type: {    // 显示类型（1： 当前<元素>有子元素，显示子元素。   2： 当前<列表>有子元素， 显示子元素,  3: 全部数据有子元素显示子元素）  资源消耗递增
				type: [Number, String],
				default: 1
			},
			lastClose: {   // 点击元素没有子元素，是否关闭弹出层
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				typesetType: 0,  // 布局类型（0： 块|瀑布流， 1：列表）
				filterVal: 0,   // 是否打开了筛选框
				
				isOpen: false, // 是否显示二级列表
				
				windowH: 1000, // 手机高度
				
				MaskH: 600,  // 遮罩高度
				
				top: 0,
				
				lists1Copy: {},
				lists1: {},
				lists2: [],
				lists3: [],
				lists4: [],
				
				active1: -1,
				active2: -1,
				active3: -1,
				active4: -1,
				
				select: [],
				
				datas: {  // 整理好的数据
					
				}
			};
		},
		created() {
			this.select = JSON.parse(JSON.stringify(this.selects));
			this.windowH = uni.getSystemInfoSync().windowHeight;
			
			// 设置默认值
			this.select.forEach(item => {
				if(~Object.keys(item).indexOf('def')) {
					this.datas[item.key] = item.def;
				}
				if(item.required) {
					this.datas[item.key] = '';
				}
			})
		},
		
		computed:{
			
			// 是否显示三级列表
			showLists3() {
				if(this.type == 1) {
					return this.lists2[this.active2] && this.lists2[this.active2].childrens && this.lists2[this.active2].childrens.length;
				} else if(this.type == 2 || this.type == 3) {
					return this.lists2.some(item => {
						return item.childrens && item.childrens.length;
					})
				}
			},
			
			// 是否显示四级列表
			showLists4() {
				if(this.type == 1) {
					return this.lists3[this.active3] && this.lists3[this.active3].childrens && this.lists3[this.active3].childrens.length;
				} else if(this.type == 2) {
					return this.lists3.some(item => {
						return item.childrens && item.childrens.length;
					})
				} else if(this.type == 3) {
					return this.lists2.some(item => {
						if(item.childrens) {
							return item.childrens.some(item1 => {
								return item1.childrens && item1.childrens.length;
							})
						} else {
							return false;
						}
					})
				}
			},
			
			topH() {
				// #ifdef APP-NVUE
				return uni.upx2px(this.height) + this.top;
				// #endif
				// #ifndef APP-NVUE
				return uni.upx2px(this.height);
				// #endif
			}
			
		},
		
		methods:{
			// 点击一级分类
			async click1(item, index) {
				this.active1 = index;
				if(item.isSort) {
					if(this.isOpen) {
						this.close();
					} else {
						item.def = item.def ? 0 : 1;
						this.lists1Copy = item;
					}
					this.runLast();
				} else { 
					if(item.id === this.lists1.id && item.name === this.lists1.name) {
						item.open = !item.open;
						if(this.isOpen) {
							this.close();
						} else {
							this.isOpen = true;
							this.lists2 = item.childrens || [];
							let top = this.top = await this.getPos();
							const maskH = this.windowH - top - uni.upx2px(this.height + 500);
              this.MaskH = maskH > 0 ? maskH : 0;
						}
					} else {
						this.select.forEach(item => {
							item.open = false;
						});
						item.open = true;
						this.isOpen = true;
						this.lists2 = item.childrens || [];
						this.lists3 = [];
						this.lists4 = [];
						this.active2 = this.active3 = this.active4 = -1;
						let top = this.top  = await this.getPos();
						const maskH = this.windowH - top - uni.upx2px(this.height + 500);
            this.MaskH = maskH > 0 ? maskH : 0;
					}
					this.lists1 = item;
					this.lists1Copy = item;
				}
				this.$emit('click1', {
					id: item.id,
					data: item,
					lists: [item],
					ids: [],
					last: true
				});
			},
			
			// 点击二级分类
			click2(item, index) {
				this.active2 = index;
				this.lists3 = item.childrens || [];
				let last = !(item.childrens && item.childrens.length);
				let d = {
					id: item.id,
					data: item,
					lists: [this.lists1Copy, item],
					ids: [item.id],
					last
				};
				if(last) {
					this.lists1Copy.titleName = item.name.slice(0, 5);
					let clearArr = this.lists1Copy.clear;
					if(clearArr && clearArr.length) {
						this.select.forEach((item, index) => {
							if(~clearArr.indexOf(item.key)) {
								this['active'+(index+1)] = -1;
								delete item.titleName
								delete this.datas[item.key]
							}
						})
					}
					this.runLast(d.ids);
				}
				if(last && this.lastClose) {
					this.close();
				}
				this.$emit('click2', d);
			},
			
			// 点击三级分类
			click3(item, index) {
				this.active3 = index;
				this.lists4 = item.childrens || [];
				let last = !(item.childrens && item.childrens.length);
				let d = {
					id: item.id,
					data: item,
					lists: [this.lists1Copy, this.lists2[this.active2], item],
					ids: [this.lists2[this.active2].id, item.id],
					last
				}
				if(last) {
					this.lists1Copy.titleName = item.name.slice(0, 5);
					this.runLast(d.ids);
				}
				if(last && this.lastClose) {
					this.close();
				}
				this.$emit('click3', d);
			},
			
			// 点击四级分类
			click4(item, index) {
				this.active4 = index;
				let last = !(item.childrens && item.childrens.length);
				
				let d = {
					id: item.id,
					data: item,
					lists: [this.lists1Copy, this.lists2[this.active2], this.lists3[this.active3], item],
					ids: [this.lists2[this.active2].id, this.lists3[this.active3].id, item.id],
					last
				}
				if(last) {
          console.log(this.$$t)
					this.lists1Copy.titleName = item.name.slice(0, 5);
					this.runLast(d.ids);
				}
				if(last && this.lastClose) {
					this.close();
				}
				this.$emit('click4', d);
			},
			
			// 点击切换排版
			changeTypeset() {
				if(this.isOpen) {
					this.close();
				} else {
					this.typesetType = this.typesetType === 0 ? 1 : 0;
					this.$emit('typeset', this.typesetType ? 'list' : 'block');
				}
			},
			
			// 点击筛选
			switchFilter() {
				if(this.isOpen) {
					this.close();
				} else {
					this.filterVal = this.filterVal === 1 ? 0 : 1;
					this.$emit('filter', this.filterVal);
				}
			},
			
			// 点击遮罩层
			close() {
				// this.lists3 = [];
				// this.lists4 = [];
				this.lists1Copy.open = false;
				this.isOpen = false;
				this.lists1 = {};
			},
			
			// 获取位置
			async getPos() {
				return new Promise((resolve, reject) => {
					
					// #ifdef APP-NVUE
					const dom = uni.requireNativePlugin('dom');
					dom.getComponentRect(this.$refs['vf-selest-box'], data => {
						if(data.result) {
							resolve(data.size.top);
						} else {
							reject();
						}
					})
					// #endif
					
					// #ifndef APP-NVUE
					const selector = uni.createSelectorQuery().in(this);
					selector.select('.vf-selest-box').fields({rect: true});
					selector.exec(data => {
						if(data[0]) {
							resolve(data[0].top);
						} else {
							reject();
						}
					})
					// #endif
				})
			},
			
			// 点击最后一个，整理数据
			runLast(ids) {
				let top = this.lists1Copy;
				if(top.isSort) {
					if(!top.val) top.val = '1|2';
					this.datas[top.key] = top.val.split('|')[top.def];
				} else {
					if(top.allVal) {
						this.datas[top.key] = ids;
					} else {
						this.datas[top.key] = ids[ids.length-1];
					}
				}
				this.$emit('select', this.datas);
			}
			
		}
	}
</script>

<style lang="scss" scoped>
.vf-selest-box{
	position: relative;
}
.sele-top{
	position: relative;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	border-bottom-color: #f3f3f3;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	padding: 0 16rpx;
	z-index: 6;
}
.vf-select-item{
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.right{
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	justify-content: space-between;
}
.sort{
	// position: relative;
	width: 37rpx;
	height: 37rpx;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	align-items: center;
	justify-content: center;
}  
.sort-text{
	// position: absolute;
}
.sort-text1{
	// position: absolute;
	// top: 6rpx;
  margin-top: -14px;
}
.vf-text1{
	font-size: 28rpx;
}
.typeset{ 
	width: 70rpx;
	/* #ifndef APP-NVUE */
	display: flex;
	flex-shrink: 0;
	/* #endif */
	flex-direction: row;
	align-items: center;
}
.filter{
	width: 100rpx;
	border-left-width: 1px;
	border-left-color: #eee;
	border-left-style: solid;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
}
.filter-text{
	font-size: 24rpx;
	margin-right: 4rpx; 
}




.sele-cont{
	width: 750rpx;
	height: 0rpx;
	/* #ifndef APP-NVUE */
	position: absolute;
	/* #endif */
	/* #ifdef APP-NVUE */
	position: fixed;
	/* #endif */
	left: 0rpx;
	overflow: hidden;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	z-index: 8;
}
.open-box{
	height: 500rpx;
}
.lists{
	width: 750rpx;
	flex: 1;
}
.list{
	height: 88rpx;
	/* #ifndef APP-PLUS */
	display: flex;
	/* #endif */
	flex-direction: row;
	padding-left: 20rpx;
	align-items: center;
}
.lists2{
	background-color: #fff;
}
.lists3{
	background-color: #f3f3f3;
}
.lists4{
	background-color: #eee;
}
// .list2{
// 	border-bottom-color: #ddd;
// }
// .list3{
// 	border-bottom-color: #ddd;
// }
// .list4{
// 	border-bottom-color: #eee;
// }
.list-text{
	font-size: 28rpx;
}
.active2{
	background-color: #f3f3f3;
}
.active3{
	background-color: #eee;
}
.active4{
	background-color: #ddd;
}


.mask{
	width: 750rpx;
	position: fixed;
	bottom: 0;   
	left: 0;
	background-color: rgba(0,0,0,0.5);
	z-index: 7;
}
</style>
